<template>
	<image style="width: 100%;position: absolute;top: 0;left: 0;z-index: -1;" mode="widthFix" src="https://static.wddzq.com/static/city_bg.png"></image>
	<tui-navigation-bar :isFixed="true" :isOpacity="true" splitLine :zIndex="99999" :scrollTop="0" title="" backgroundColor="transparent" color="#333">
		<view style="height: 40px;display: flex;align-items: center;" @click="handleBack">
			<view style="width: 30rpx;"></view>
			<u-icon name="arrow-left" size="26" color="#fff"></u-icon>
			<view style="width: 10rpx"></view>
			<text style="font-size: 28rpx;color: #fff;">加入清醺局</text>
		</view>
	</tui-navigation-bar>
	<view style="display: flex;flex-direction: column;align-items: center;position: relative;z-index: 10;margin-top: 200rpx;">
		<view class="title">清醺局</view>
		<view class="title-sub">加入清醺局官方社群，和你一样有趣的伙伴都在这里</view>
		
		<image class="img-one" src="https://static.wddzq.com/static/box.png" />
		<view class="content">
			<view class="name">新活动早知道</view>
			<view class="desc">组局更便捷｜定期玩乐福利</view>
			
			<view class="city" @click="handleClick">
				<text>{{select?.nameCity || '请选择城市'}}</text>
				<image style="background-color: #f2f2f2;" src="https://static.wddzq.com/static/right.png" />
			</view>
			<image class="img-tow" :src="select?.codeUrl" :show-menu-by-longpress="true" />
			<u-button class="footer-btn" @click="handleSubmit" customStyle="width: 380rpx;height: 72rpx;border-radius: 44rpx;background-color: #030303;border: 1rpx solid #aaa;font-size: 26rpx;" color="#fff">长按识别上方二维码</u-button>
			<view class="footer-text">添加小助理微信，拉你进专属兴趣社群</view>
		</view>
	</view>
	<u-popup :show="show" :round="18" mode="bottom" @close="handleClose">
		<view class="city-pop">
			<view class="city-item" v-for="item in citys" :key="item.id" @click="handleCityClick(item)">{{item.nameCity}}</view>
		</view>
	</u-popup>
</template>

<script>
	import { getAssociationList } from '../../config/api.js';
	import { to } from '../../config/utils.js'
	export default {
		data() {
			return {
				citys: [],
				select: '',
				show: false,
			}
		},
		onReady() {
			this.getQr();
		},
		methods: {
			handleBack() {
				uni.navigateBack();
			},
			handleClick() {
				this.show = true;
			},
			handleClose() {
				this.show = false;
			},
			handleCityClick(data) {
				this.select = data;
				this.handleClose();
			},
			async getQr() {
				const [err, data] = await to(getAssociationList());
				
				if(err) {
					return uni.showToast({
						title: err?.msg || '获取社群二维码失败',
						icon: 'none'
					})
				}
				if(data.success) {
					this.citys = data?.data || [];
					let __city = uni.getStorageSync('__local__city');
					let _select = '';
					if(__city) {
						let _select = this.citys.find(item => item.codeCity === __city.split(',')[1]);
					}
					if(!_select) {
						_select = this.citys[0];
					}
					this.select = _select;
				} else {
					uni.showToast({
						title: data?.msg || '获取社群二维码失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style>
.title {
	height: 126rpx;
	font-size: 98rpx;
	font-weight: normal;
	color: #FFFFFF;
	line-height: 126rpx;
	text-shadow: 0px 0px 32px rgba(0,0,0,0.2);
	margin-bottom: 24rpx;
}
.title-sub {
	height: 40rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #FFFFFF;
	line-height: 40rpx;
	text-shadow: 0px 0px 32px rgba(0,0,0,0.2);
	margin-bottom: 48rpx;
}

.img-one {
	width: 282rpx;
	height: 94rpx;
}
.content {
	width: 614rpx;
	height: 800rpx;
	background-color: #fff;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.name {
	height: 52rpx;
	font-size: 40rpx;
	font-weight: 500;
	color: #FF8F1F;
	line-height: 52rpx;
	margin-top: 40rpx;
	margin-bottom: 16rpx;
}
.desc {
	height: 32rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #333333;
	line-height: 32rpx;
}

.img-tow {
	width: 276rpx;
	height: 276rpx;
	margin: 32rpx 0;
}
.footer-text {
	margin-top: 24rpx;
	height: 32rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	line-height: 32rpx;
}
.city {
	width: 300rpx;
	height: 72rpx;
	background: #F2F2F2;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 80rpx;
}
.city text {
	height: 36rpx;
	font-size: 26rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 36rpx;
	margin-right: 10rpx;
}
.city image {
	width: 28rpx;
	height: 28rpx;
}
.city-pop {
	padding: 30rpx 0;
}
.city-item {
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 32rpx;
	color: #666;
	border-bottom: 1rpx solid #F2F2F2;
}
.city-item:last-child {
	border: none;
}
</style>
